<template>
	<view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
		<!--是否显示上传驳回组件-->
		<view v-if="detail_flow[0].content.submit_again && userinfo.id==pickup_person.member_id" class="describe-box">
			<view class="information-title">请提交复审信息</view>
			<textarea @blur="getinfo" maxlength="4096" class="textarea-info" placeholder-style="color:#9e9e9e" placeholder="请根据任务详情重新提交复审信息，恶意上传复审信息会触发封号"></textarea>
			<uploadimgs :imgwidth="132" :imghight="132" :imgnum="imgnum" :imglist="rejectimg" ref="uploadimgs"></uploadimgs>
			<view class="zhongcai">
				<checkbox-group @change="radioChange">
				<label class="radios">
					<checkbox value='1'></checkbox>
					<text>驳回并申请官方介入</text>
				</label>
				</checkbox-group> 
			</view>
			<view class='button'  @click="submit">提交</view>
		</view>
		<view class="task-box" v-for="(item,index) in detail_flow" :key="index">
			<view class="top">
				<view class="title">{{item.title}}</view>
				<text>{{item.add_time}}</text>
			</view>
			<view class="bottom" v-if="item.content.type=='avatar'">
				<image class="icon" :src="item.content.avatar" mode="aspectFill"></image>
				<text>{{item.content.nickname}}</text>
			</view>
			<view class="bottom ImageText" v-if="item.content.type=='graphic'" @click="previewImage(item.content.thumb)">
				<text v-if="item.content.text">{{item.content.text}}</text>
				<view class="examine-image">
					<image v-for="(item,index) in item.content.thumb" :src="item" @tap="preimagIndx=index" :key="index" class="content"
					 mode="aspectFill"></image>
				</view>
			</view>
			<view class="bottom" v-if="item.content.type=='text'">
				<text>{{item.content.text}}</text>
			</view>
		</view>
		<complaint></complaint>
		</mescroll-body>
	</view>
</template>

<script>
	/**
	 * 接单记录
	 */
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				is_reject:0,
				pickup_person:'',//接单人
				userinfo:'',
				reject_text:'',
				rejectimg: [],
				imgnum: 4, //最大上传的图片数量
				preimagIndx: 0, //当前选中图片的索引
				id: '',
				detail_flow: [{content:{submit_again:0}}],
				downOption: {
					auto: true,
					textLoading: "玩命加载中...",
					textNoMore: "-- 人家是有底线的 --",
					autoShowLoading:true
				},
				upOption: {
					use:false
				}
			}
		},
		onLoad(option) {
			console.log(option)
			this.id = option.id
			this.pickupId = option.member_id
			this.userinfo = uni.getStorageSync('user_info')
			uni.$on('getimageArr', (data) => {
				this.rejectimg = data
			})
			//this.userinfo = uni.getStorageSync('user_info')
			//this.init()
		},
		methods: {
			getinfo(e) {
				this.reject_text = e.detail.value
			},
			radioChange(e){
				this.is_reject =e.detail.value.length>0? 1:0
			},
			//提交驳回
			submit() {
				if(!this.reject_text){
					this.$ShowMsg('您未说明复审情况')
					return
				}
				if(this.rejectimg.length==0){
					this.$ShowMsg('您未提交复审图片')
					return
				}
				let submitinfo = {
					id: this.id,
					verification_text: this.reject_text,
					verification_diagram_re: this.rejectimg,
					is_reject:this.is_reject
				}
				console.log(submitinfo)
				// return
				this.$HttRequest({
					url: '/moonlightOrder/reSubmitTask',
					param: submitinfo
				},'POST',true).then((res) => {
					console.log(res)
					if (res.status === 10000) {
						this.$ShowMsg('提交成功', 'success')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 2500)
					} else {
						this.$ShowMsg(res.message);
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg(error.errMsg);
				})
			},
			downCallback() {
				this.init()
			},
			//获取流程
			init() {
				this.$HttRequest({
					url: '/moonlightOrder/process',
					param: {
						id: this.id,
					}
				}).then((res) => {
					console.log(res)
					if (res.status === 10000) {
						this.detail_flow = res.data.lists
						this.pickup_person = res.data.order
					} else {
						this.$ShowMsg(res.message)
					}
					this.mescroll.endSuccess();
				}).catch((error) => {
					//异常错误
					this.mescroll.endSuccess();
					this.$ShowMsg(error.errMsg);
				})
			},
			//图片预览
			previewImage(arrayimg) {
				// console.log(arrayimg)
				// return
				this.$Preimage(arrayimg, this.preimagIndx)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}
	
	
	.describe-box {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		width: 80%;
		flex-direction: column;
		margin: 0 auto;
		margin-top: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx 40rpx;
		.information-title{
			color: #333;
			font-size: 28rpx;	
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.zhongcai {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 20rpx;
			color: #9e9e9e;
			.radios {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 25rpx;
				checkbox{
					transform: scale(0.6);
				}
			}
		}
	
		.textarea-info {
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1rpx solid #f0f0f0;
			border-radius: 10rpx;
			width: 92%;
			height: 140rpx;
			font-size: 28rpx;
		}
	
		.button {
			border-radius: 20rpx;
			width: 60%;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 30rpx;
			font-weight: bold;
			margin-right: 0;
			margin: 0 auto;
			
			background-color: $uni-color-primary;
		}
	
	}
	
	.task-box {
		border-radius: 10rpx;
		width: 80%;
		padding: 30rpx 40rpx;
		background-color: #fff;
		font-size: 28rpx;
		margin: 20rpx auto;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.title {
				font-weight: bold;
			}

			text {
				font-size: 22rpx;
				color: #838383;
			}
		}

		.bottom {
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			font-size: 28rpx;
			color: #9e9e9e;
			width: 100%;
			.examine-image{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.content {
					background-color: #f8f8f8;
					width: 150rpx;
					height: 150rpx;
					margin-right: 10rpx;
					margin-bottom: 20rpx;
					border-radius: 20rpx;
				}
			}
			

			.icon {
				border-radius: 50%;
				width: 45rpx;
				height: 45rpx;
				margin-right: 20rpx;
			}
		}

		.ImageText {
			flex-direction: column;
			
			text {
				margin-bottom: 10rpx;
			}
		}
	}
</style>
